<template>
  <div>
    <el-row>
      <el-col :span="10" :offset="8"><h3> 订单总额:{{totalMoney}}元</h3></el-col>
    </el-row>
    <el-row>
      <el-col :span="8" :offset="8">
        <div id="qrcode"></div>
      </el-col>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-row>
        <el-col :span="10" :offset="2">
          <el-button type="primary" size="mini" plain @click="pay">支付</el-button>
        </el-col>
        <el-col :span="10" :offset="2">
          <el-button type="danger" size="mini" plain @click="cancel">取消</el-button>
        </el-col>
      </el-row>
    </span>


  </div>
</template>

<script>
  import QRCode from 'qrcodejs2';

  export default {
    name: "PayMoney",
    data() {
      return {
        oid: "",
        totalMoney: 0,
        link: 'https://baidu.com'
      }
    },
    methods: {
      getOrderById(oid) {
        this.$axios.get("order.action/" + oid)
          .then(res => {
            this.totalMoney = res.data.sumPrice;
            this.oid = oid;
          })
          .catch(err => {
            this.$message.error(err)
          })
      },
      pay() {
        //支付
        let order = {id: this.oid, orderState: "o-6"};
        this.$axios
          .put("payOrder.action", order)
          .then(res => {
            if (res.data.code > 0) {
              this.$message.success(res.data.msg);
              this.$parent.$parent.dialogVisible = false;
              this.$parent.$parent.getOrders();
            } else {
              this.$message.error(res.data.msg);
            }
          })
          .catch(err => {
            this.$message.error(err)
          });
      },
      cancel() {
        //取消
        this.$parent.$parent.dialogVisible = false;
      },
      qrcode() {
        //  生成二维码
        let qrcode = new QRCode('qrcode', {
          width: 124,
          height: 124,        // 高度
          text: this.link,   // 二维码内容
          render: 'canvas',   // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        });
      }
    },
    created() {
      this.$nextTick(item => {
        this.qrcode();
      })

    },
    components: {
      QRCode
    }
  }
</script>

<style scoped>

</style>
